<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>登录页</title>	
	<link rel="stylesheet" type="text/css" href="layer-v3.0.3/layer/skin/default/layer.css">
	<link rel="stylesheet" type="text/css" href="css/aui/login.css">
	
	</head>
	<body style="font-family:'微软雅黑'">
		<div class="aui-content aui-content-padded">
			<header class="aui-bar aui-bar-nav" style="background-color:#f8f8f8;">
				<a class="aui-pull-left aui-btn" href="index.html">
					<span class="aui-iconfont aui-icon-home" style="color:#000;"></span>
				</a>
				<div class="aui-title" style="color:red;">登录</div>
				<a class="aui-pull-right" href="register.html" style="color:#000;">注册</a>
			</header>
				<div class="aui-list-item" style="background-color:#fff;text-align:center;">
					<i class="aui-iconfont aui-icon-mobile"></i>
					手机动态码登录
				</div>
			    <!-- --手机动态码登录-- -->
			    <div class="aui-content aui-margin-b-15" style="margin-top:0.75rem;">
			    	<!-- <form> -->
			    		<ul class="aui-list aui-form-list">
			    			<li class="aui-list-item">
			    				<div class="aui-list-item-inner">
			    					<div class="aui-list-item-label" style="width:20%">手机号</div>
			    					<div class="aui-list-item-input" style="width:80%;">
			    						<input type="text" placeholder="请输入手机号" id="phone">
			    					</div>
			    				</div>
			    			</li>
			    			<li class="aui-list-item">
			    				<div class="aui-list-item-inner">
			    					<div class="aui-list-item-label" style="width:20%;">验证码</div>
			    					<div class="aui-list-item-input" style="width:50%;">
			    						<input type="text" placeholder="请输入4位验证码" id="yanzheng"  onKeyUp="if(this.value.length>4){this.value=this.value.substr(0,4)};">
			    					</div>
			    					<div class="aui-list-item-inner" style="width:30%;">
			    						<div class="aui-bar aui-bar-btn">
										    <input type="button" id="pvc" value="获取验证码">
										</div>
			    					</div>
			    				</div>
			    			</li>
			    		</ul>
			    		<input type="submit" class="aui-btn aui-btn-info aui-btn-block" style="margin-top:1.5rem;" id="btn" value="登录">
			    	<!-- </form> -->
			    	
			    </div>
			    <!-- --手机动态码登录 end-- -->
			    <section class="aui-grid aui-margin-b-15">
			    	<div class="aui-row joint-login">
			    		<h2>
				    		<span>合作账号登录</span>
				    	</h2>
				    	<center>
				    	<div class="joint-qq">
				    		<a href="#" class="qq"></a>
				    	</div>
				    	</center>
			    	</div>
			    </section>
	        <footer class="aui-bar aui-bar-tab bottom">
			    	Copyright © 2007-2016 Bizpower版权所有
		    </footer>
    	</div>
    	<script type="text/javascript" src="js/jquery-3.1.1/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="layer-v3.0.3/layer/layer.js"></script>
		<script>
		// --表单验证--
			$(function(){
				$("#btn").click(function(){
					var phone = $("#phone").val(),
					yanzheng = $("#yanzheng").val();
					if(phone == ""){
						layer.msg("手机号不能为空");
						return;
					}else if(phone !='' && !(/^1[34578]\d{9}$/.test(phone))){
						layer.msg('请输入正确的电话号码');
	                    return;
					}else if(yanzheng == ""){
						layer.msg("验证码不能为空");
						return;
					}else if(yanzheng.length != 4){
						layer.msg("验证码错误");
						return;
					}
				})
			})
			// --发送验证码--
			var wait=5;  
function time(o) {  
        console.log(o);
        if (wait == 0) {  
            o.removeAttribute("disabled");            
            o.value="获取验证码";  
            wait = 5;  
        } else {  
            o.setAttribute("disabled", true);  
            o.value="重新发送(" + wait + ")";  
            wait--;  
            setTimeout(function() {  
                time(o)  
            },  
            1000)  
        }  
    }  
document.getElementById("pvc").onclick=function(){time(this);} 
			
				
		</script>
	</body>
</html>